<script lang="ts" setup>
import {onMounted, ref} from "vue";
import request from "../service/request";
import {Tool} from "@/util/tool";
import TheWelcome from "@/components/the-welcome.vue";

const ebooks = ref();
const tree: any = ref();//表格树形结构
const categorys = ref();//所有分类
const isShowWelcome = ref<boolean>(true);
let category2id = 0;
const openKeys:any=ref([]);
const selectedKeys=ref(["welcome"])

const actions: Record<string, string>[] = [
  {type: 'StarOutlined', text: '156'},
  {type: 'LikeOutlined', text: '156'},
  {type: 'MessageOutlined', text: '2'},
];

const handleQueryCategory = () => {
  request.get("/category/all", {}).then((res) => {
    categorys.value = res.data

    tree.value = [];
    tree.value = Tool.array2Tree(categorys.value, 0);
    tree.value.forEach((item:any)=>{
      openKeys.value.push(item.id)
    })
  })
};

const handleQuery = () => {
  request.get("/ebook/all", {
    params: {
      category2id: category2id
    }
  }).then((res: any) => {
    ebooks.value = res.data
  })
};

const handleClick = (value: any) => {
  if (value.key == "welcome") {
    isShowWelcome.value = true
  } else {
    category2id = value.key
    isShowWelcome.value = false
    handleQuery()
  }
};

onMounted(() => {
  handleQueryCategory()
});

</script>

<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          @click="handleClick"
      >
        <a-menu-item key="welcome">
          <MailOutlined/>
          <span>欢迎</span>
        </a-menu-item>
        <a-sub-menu v-for="item in tree" :key="item.id">
          <template v-slot:title>
            <span><user-outlined/>{{ item.name }}</span>
          </template>
          <a-menu-item v-for="child in item.children" :key="child.id">
            <MailOutlined/>
            <span>{{ child.name }}</span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="tip" :disabled="true">
          <span>以上菜单在分类管理配置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout-content :style="{ background: '#fff', padding: '10px', margin: 0, minHeight: '280px' }">
      <div class="welcome" v-show="isShowWelcome">
        <the-welcome/>
      </div>

      <a-list v-show="!isShowWelcome" item-layout="vertical" size="large" :grid="{gutter:20,column:3 }"
              :data-source="ebooks">
        <template #renderItem="{ item }">
          <a-list-item key="item.name">
            <template #actions>
              <span>
                <component v-bind:is="'FileOutlined'" style="margin-right: 8px" />
                {{ item.docCount }}
              </span>
              <span>
                <component v-bind:is="'UserOutlined'" style="margin-right: 8px" />
                {{ item.viewCount }}
              </span>
              <span>
                <component v-bind:is="'LikeOutlined'" style="margin-right: 8px" />
                {{ item.voteCount }}
              </span>
            </template>
            <a-list-item-meta :description="item.description">
              <template #title>
                <router-link :to="'/doc?ebookId='+item.id">{{ item.name }}</router-link>
              </template>
              <template #avatar>
                <a-avatar :src="item.cover"/>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-layout-content>
  </a-layout>
</template>
<style lang="less" scoped>
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}
</style>

